![javascriptのテストのはなし:SugerTest](https://devio2023-media.developers.io/wp-content/uploads/2012/04/sugertest.png)
javascriptのテストのはなし:SugerTest
今回はマイナーであろうSugerTestを紹介します。
ユニットテスト用のライブラリで、JsUnitTestをベースとした拡張版?という感じですね。
実際に利用するにはSugarTestのライブラリと合わせてJsUnitTestのライブラリをロードする必要があります。テスト実行結果の画面はJsUnitTestの画面そのものです。
準備
ここからSugerTestのライブラリを落とします。
先に書いた通り、JsUnitTestとSugarTestのライブラリ両方を使う必要がありますが、ダウンロードしたSugerTestのライブラリの中にJsUnitTestも含まれているので、特に気にする必要はないです。
ダウンロードしたzipを解凍するとassetというディレクトリがあって、その中にJsUnitTestとSugerTestのjsが入っているのでそれをhtmlで指定します。
また、htmlのbodyの中に
<div id="testlog"></div>
を用意しておきます。JsUnitTestがこのタグに対してテスト結果を出力します。
アサーション
ドキュメントによると、使えるアサーションはJsUnitTestのアサーションで次のものが挙げられています。
assert、assertEqual、assertNotEqual、assertEnumEqual、assertEnumNotEqual、assertHashEqual、assertHashNotEqual、assertIdentical、assertNotIdentical、assertNull、assertNotNull、assertUndefined、assertNotUndefined
ちなみに、JsUnitTestには上記以外にも
assertNullOrUndefined、assertNotNullOrUndefined、assertMatch、assertNoMatch、assertHasClass、assertHidden、assertInstanceOf、assertNotInstanceOf、assertRespondsTo、assertRaise、assertNothingRaised、assertVisible、assertNotVisible、assertElementsMatch、assertElementMatches
があります。
使い方
基本
SugarTest().run();
でテストを実行します。
コンテキストを作る
describe()でコンテキストを作り、it()でテストケースを複数定義、end()でコンテキストを終えます。describe()は複数作れるし、ネストする事もできます。
SugarTest() .describe("context 1") .it("testcase 1-1", function(){...}) .it("testcase 1-2", function(){...}) .describe("context 1-2") .it("testcase 1-2-1", function(){...}) .it("testcase 1-2-2", function(){...}) .end() .end() .describe("context 2") .it("testcase 2-1", function(){...}) .it("testcase 2-2", function(){...}) .end() .run();
全てのメソッドがsugarTestのオブジェクトを返すので、コンテキスト分、ユニット分、チェーンする事ができます。
チェーンさせて記述するのがSugarTestの特徴ですね。
setUpとtearDwon
SugarTestの場合は、setUp、tearDownという名称ではなく、before()、after()で定義します。これらのメソッドもsugarTestのオブジェクトを返すのでチェーンさせて記述します。
SugarTest() .before(function(data){...}) .after(function(data){...}) .describe("context 1") .it("testcase 1-1", function(){...}) .it("testcase 1-2", function(){...}) .end() .run();
また、before()、after()はコンテキストの中でも行う事が出来ます。
before()の場合はネストの外側から内側に、after()の場合はネストの内側から外側に向けて実行されます。
SugarTest() .before(function(data){...}) .after(function(data){...}) .describe("context 1") .before(function(data){...}) .after(function(data){...}) .it("testcase 1-1", function(){...}) .it("testcase 1-2", function(){...}) .end() .run();
ルートコンテキスト
ルートコンテキストの直下にもユニットを作れます。
SugarTest() .before(function(data){...}) .after(function(data){...}) .it("root testcase", function(){...}) .describe("context 1") .before(function(data){...}) .it("testcase 1-1", function(){...}) .it("testcase 1-2", function(){...}) .end() .run();
root()を使うとルートコンテキストに戻れます。
SugarTest() .before(function(data){...}) .after(function(data){...}) .it("root testcase1", function(){...}) .describe("context 1-1") .before(function(data){...}) .it("testcase 1-1", function(){...}) .it("testcase 1-2", function(){...}) .root() .it("root testcase2", function(){...}) .end() .run();
補足
describe()/it()の代わりに、context()/should()を使う事も出来ます。テスト実行時の表示が変わるだけで基本的に同じです。
実行してみる
ライブラリに入っているサンプルのテストファイルsugar_test_sample.htmlがやれる事を網羅していて良い感じなのでこれを動かしてみます。実行結果は次の様な感じになります。
コンテキストをネストさせてテストが構造化できるわけですが、結果表示はフラットなのでいまいち分かりにくいですね。。テスト実行~結果表示まではJsUnitTestの機能なので仕方ないんでしょうけど。
ちなみにsugar_test_sample.htmlのソースはこんな感じになってます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>SugerTest</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <link rel="stylesheet" href="assets/unittest.css" type="text/css" /> <script src="assets/jsunittest.js" type="text/javascript"></script> <script src="assets/sugar_test.js" type="text/javascript"></script> <!-- Source and test files go here --> </head> <body> <div id="content"> <div id="header"> <h1>SugarTest sample test file</h1> <p>This file shows example usage of <a href="http://sugartest.scriptia.net/">SugarTest</a>.</p> </div> <div id="testlog"></div> </div> <script type="text/javascript"> // <![CDATA[ SugarTest("AAAA") .it("root", function(data){ this.assert(true); }) .before(function(data){ this.wadus = "wadus"; }) .after(function(){ this.wadus = ""; }) .describe('First context') .it('runs examples', function(data) { this.assert(false); }) .it('runs examples2', function(data) { this.assert(true); }) .end() .describe('Second context') .before(function(data){ this.wadus = this.wadus.toUpperCase(); }) .it('runs examples', function(data) { this.assertEqual(this.wadus, "WADUS"); }) .end() .describe('Third context') .should('runs examples', function(data) { this.assertEqual(this.wadus, data.wadus); }) .end() .run(); // ]]> </script> </body> </html>